const _ = require('lodash');
import EcgCharts from '@/components/EcgCharts';
import { ALARM_THRESHOLD_MAP ,wsUrl} from '@/constants';
import { alarmHistory } from '@/services/alarmMsg';
import { screenAreaInfo } from '@/services/common';
import { EllipsisOutlined } from '@ant-design/icons';
import { Popconfirm } from 'antd';
import { useEffect, useRef, useState } from 'react';
import closeNotice from '../../../public/images/closeNotice.png';
import manPng from '../../../public/images/man.png';
import womanPng from '../../../public/images/woman.png';
import highMp3 from '../../../public/mp3/high.mp3';
import middleMp3 from '../../../public/mp3/middle.mp3';

import './index.less';

let timer: any = null;
let setIntervalFun: any = null;
let checkWebSocketFun: any = null;
let setIntervalFunCloseFlag = 0; // 关闭定时器的标志位
let sendWsDataInterval: any = null;
//心率  heartRate 血氧  spo2Value 体温  temperature1 呼吸 respirationRate 收缩压 systolicPressure 舒张压 diastolicPressure 平均压 meanPressure
let heartRateObj: any = {},
  spo2ValueObj: any = {},
  temperature1Obj: any = {},
  temperature2Obj: any = {},
  respirationRateObj: any = {},
  systolicPressureObj: any = {},
  diastolicPressureObj: any = {},
  meanPressureObj: any = {};
let webSocketKeyStr = ''; // 用于存储WebSocket连接的键值对
let nowTime = ''; //当前时间
let gain = ''; // 增益
let paperSpeed = ''; // 纸速
let canvasInterval = 1;

const PersonalHomePage = () => {
  const urlParams = new URLSearchParams(window.location.search);
  const screenAreaId = urlParams.get('screenAreaId');
  const alarmId = urlParams.get('alarmId');
  const [screenAreaInfoData, setScreenAreaInfoData] = useState<any>({});
  const [monitorData, setMonitorData] = useState<any>({});
  const [scketSuccessFlag, setScketSuccessFlag] = useState<boolean>(false);
  const socketDataRef: any = useRef();
  const wsRef = useRef<any>(null); // 用于管理WebSocket连接
  const [currentIndex, setCurrentIndex] = useState(0);
  const intervalRef: any = useRef(null);
  const [targetAlarms, setTargetAlarms] = useState<any>([]);
  const [alarmLevel, setAlarmLevel] = useState<any>(0);
  const playAlarmintervalRef: any = useRef(null);
  // 创建音频元素的引用
  const videoRef: any = useRef(null);
  const getScreenAreaInfoData = async () => {
    let res = null;
    if (screenAreaId) {
      res = await screenAreaInfo({
        id: screenAreaId,
      });
    } else {
      res = await alarmHistory({
        alarmId: alarmId,
      });
    }

    if (res?.code === 200) {
      const data = res?.data || {};
      const patientData = alarmId
        ? {
            patient: data.patientInfo,
            device: data.deviceInfo,
          }
        : data;
      setScreenAreaInfoData(patientData);
      if (alarmId) {
        webSocketKeyStr = data.webSocketKey;
      }
      if (patientData) {
        //监护仪
        if (patientData?.device?.type == 1) {
          const patientLimits = patientData?.patient?.patientLimits || [];
          heartRateObj =
            patientLimits.find((its: any) => {
              return its.itemCode === 'heartRate';
            }) || {};
          spo2ValueObj =
            patientLimits.find((its: any) => {
              return its.itemCode === 'spo2Value';
            }) || {};
          temperature1Obj =
            patientLimits.find((its: any) => {
              return its.itemCode === 'temperature1';
            }) || {};
          temperature2Obj =
            patientLimits.find((its: any) => {
              return its.itemCode === 'temperature2';
            }) || {};
          respirationRateObj =
            patientLimits.find((its: any) => {
              return its.itemCode === 'respirationRate';
            }) || {};
          systolicPressureObj =
            patientLimits.find((its: any) => {
              return its.itemCode === 'systolicPressure';
            }) || {};
          diastolicPressureObj =
            patientLimits.find((its: any) => {
              return its.itemCode === 'diastolicPressure';
            }) || {};
          meanPressureObj =
            patientLimits.find((its: any) => {
              return its.itemCode === 'meanPressure';
            }) || {};
          const deviceParamsList = patientData?.device?.deviceParamsList || []; // 设备参数列表
          paperSpeed =
            deviceParamsList.filter((item: any) => item.paramCode === '1')?.[0]
              ?.paramValue || '25mm/s'; // 走纸速度
          gain =
            deviceParamsList.filter((item: any) => item.paramCode === '2')?.[0]
              ?.paramValue || '1'; // 增益
          switch (paperSpeed) {
            case '12.5mm/s':
              canvasInterval = 0.5;
              break;
            case '25mm/s':
              canvasInterval = 1;
              break;
            case '50mm/s':
              canvasInterval = 2;
              break;
            default:
              canvasInterval = 1;
              break;
          }

          setMonitorData(patientData.device);
          CreateMultipleCon();
        }
      }
    }
  };
  const CreateMultipleCon = () => {
    if (wsRef.current || !(screenAreaId || webSocketKeyStr)) return; // 避免重复连接
    // 为每个患者创建WebSocket连接
    let ws = null;
    if (webSocketKeyStr) {
      ws = new WebSocket(`${wsUrl}/ws5/${webSocketKeyStr}`);
    } else {
      ws = new WebSocket(`${wsUrl}/ws7/${screenAreaId}`);
    }
    wsRef.current = ws;
    ws.onopen = () => {
      console.log(`WebSocket connected`);
      setScketSuccessFlag(true);
    };
    ws.onmessage = (event) => {
      const data = event.data ? JSON.parse(event.data) : [];
      setIntervalFunCloseFlag = 0;
      console.log(data, '发送得消息');
      const targetData = data.map((its: any) => {
        const existingItem = socketDataRef.current?.find(
          (item: any) => item.ip === its.ip,
        );
        const existingWaveform = existingItem?.ecgWaveform || {};
        const newWaveform = its.ecgWaveform || {};
        const mergedWaveform: any = {};

        // 合并所有导联数据
        for (const key in newWaveform) {
          if (
            Array.isArray(existingWaveform[key]) &&
            Array.isArray(newWaveform[key])
          ) {
            mergedWaveform[key] = [
              ...existingWaveform[key],
              ...newWaveform[key],
            ];
          } else {
            mergedWaveform[key] =
              newWaveform[key] || existingWaveform[key] || [];
          }
        }

        // 保留旧数据中可能存在的其他属性
        for (const key in existingWaveform) {
          if (!mergedWaveform[key]) {
            mergedWaveform[key] = existingWaveform[key];
          }
        }
        //合并呼吸波数据
        const existingRespirationWaveform =
          existingItem?.respirationWaveform || [];
        const newRespirationWaveform = its.respirationWaveform || [];
        let mergedRespirationWaveform: any = [];
        if (
          Array.isArray(existingRespirationWaveform) &&
          Array.isArray(newRespirationWaveform)
        ) {
          mergedRespirationWaveform = [
            ...existingRespirationWaveform,
            ...newRespirationWaveform,
          ];
        }
        //合并血氧波数据
        const existingSpo2Waveform = existingItem?.spo2Waveform || [];
        const newSpo2Waveform = its.spo2Waveform || [];
        let mergedSpo2Waveform: any = [];
        if (
          Array.isArray(existingSpo2Waveform) &&
          Array.isArray(newSpo2Waveform)
        ) {
          mergedSpo2Waveform = [...existingSpo2Waveform, ...newSpo2Waveform];
        }

        nowTime = its.timestamp;
        return {
          ip: its.ip,
          respirationWaveform: mergedRespirationWaveform,
          spo2Waveform: mergedSpo2Waveform,
          ecgWaveform: mergedWaveform,
          heartRate: its.heartRate,
          respirationRate: its.respirationRate,
          systolicPressure: its.systolicPressure,
          diastolicPressure: its.diastolicPressure,
          meanPressure: its.meanPressure,
          spo2Value: its.spo2Value,
          temperature1: its.temperature1,
          temperature2: its.temperature2,
          leadMode: its.leadMode,
          status: its.status,
          alarms: its.alarms || [],
          productModel: its.productModel, // 产品型号
          maxAlarmLevel: its.maxAlarmLevel,
        };
      });
      socketDataRef.current = _.cloneDeep(targetData);
    };
    ws.onerror = (error) => {
      console.error(`WebSocket error:`, error);
      setScketSuccessFlag(false);
    };

    ws.onclose = () => {
      console.log(`WebSocket closed`);
      setScketSuccessFlag(false);
      wsRef.current = null;
    };

    // 返回清理函数
    return () => {
      ws.close();
      wsRef.current = null;
    };
  };
  const drawIntervalFun = () => {
    setIntervalFun = window.setInterval(() => {
      setIntervalFunCloseFlag = setIntervalFunCloseFlag + 1;
      if (setIntervalFunCloseFlag > 1500 && setIntervalFun) {
        window.clearInterval(setIntervalFun);
        setIntervalFun = null;
        return;
      }
      if (socketDataRef.current) {
        let maxAlarmLevelTarget = 0; // 最大报警等级
        const oldSocketData = _.cloneDeep(socketDataRef.current);
        const data = oldSocketData.map((its: any) => {
          let fluctuateNum = 19; // 波动幅度
          if (its.productModel && its.productModel.includes('bxs')) {
            fluctuateNum = 39;
          } else if (
            its.productModel &&
            its.productModel.includes('ZCHS-HS120-DCJH-001')
          ) {
            fluctuateNum = 9;
          }
          for (const key in its.ecgWaveform) {
            if (its.ecgWaveform[key].length <= 2000) {
              its.ecgWaveform[key] = its.ecgWaveform[key].splice(
                0,
                fluctuateNum,
              );
            } else {
              its.ecgWaveform[key] = its.ecgWaveform[key].splice(
                0,
                fluctuateNum * 2,
              );
            }
          }
          // 呼吸波形
          if (its.respirationWaveform) {
            //K1监护仪 250个点
            its.respirationWaveform =
              its?.respirationWaveform?.length <= 2000
                ? its.respirationWaveform.splice(0, fluctuateNum)
                : its.respirationWaveform.splice(0, fluctuateNum * 2);
          }
          // 血氧波形
          if (its.spo2Waveform) {
            if (its.productModel && its.productModel.includes('bxs')) {
              its.spo2Waveform =
                its.spo2Waveform.length <= 2000
                  ? its.spo2Waveform.splice(0, 4)
                  : its.spo2Waveform.splice(0, 8);
            } else {
              its.spo2Waveform =
                its.spo2Waveform.length <= 2000
                  ? its.spo2Waveform.splice(0, fluctuateNum)
                  : its.spo2Waveform.splice(0, fluctuateNum * 2);
            }
          }
          return its;
        });
        const targetSocketData = _.cloneDeep(socketDataRef.current).map(
          (itsval: any) => {
            let fluctuateNum = 19; // 波动幅度
            if (itsval.productModel && itsval.productModel.includes('bxs')) {
              fluctuateNum = 39;
            } else if (
              itsval.productModel &&
              itsval.productModel.includes('ZCHS-HS120-DCJH-001')
            ) {
              fluctuateNum = 9;
            }
            for (const keyval in itsval.ecgWaveform) {
              if (itsval.ecgWaveform[keyval].length <= 2000) {
                itsval.ecgWaveform[keyval].splice(0, fluctuateNum);
              } else {
                itsval.ecgWaveform[keyval].splice(0, fluctuateNum * 2);
              }
            }
            // 呼吸波形
            if (itsval?.respirationWaveform) {
              itsval?.respirationWaveform?.length <= 2000
                ? itsval.respirationWaveform.splice(0, fluctuateNum)
                : itsval.respirationWaveform.splice(0, fluctuateNum * 2);
            }
            // 血氧波形
            if (itsval?.spo2Waveform) {
              if (itsval.productModel && itsval.productModel.includes('bxs')) {
                itsval.spo2Waveform.length <= 2000
                  ? itsval.spo2Waveform.splice(0, 4)
                  : itsval.spo2Waveform.splice(0, 8);
              } else {
                itsval.spo2Waveform.length <= 2000
                  ? itsval.spo2Waveform.splice(0, fluctuateNum)
                  : itsval.spo2Waveform.splice(0, fluctuateNum * 2);
              }
            }

            return itsval;
          },
        );
        socketDataRef.current = _.cloneDeep(targetSocketData);
        let targetDeviceItem = _.cloneDeep(monitorData);
        for (let i = 0; i < data.length; i++) {
          let tempCanvasInterval = canvasInterval;
          // 心电监护
          if (data[i].productModel && data[i].productModel.includes('bxs')) {
            tempCanvasInterval = Number((canvasInterval / 4).toFixed(2));
          }

          if (targetDeviceItem.type == 1) {
            let targetEcgYAxisData = [];
            for (const key in data[i].ecgWaveform) {
              targetEcgYAxisData.push({
                minY: -1,
                maxY: 1,
                canvasInterval: tempCanvasInterval,
                color: '#8bff00',
                padding: 5,
                name: key,
                ecgYAxisData: data[i].ecgWaveform[key],
                key: data[i].ip + key,
                id: data[i].ip,
                leadNumber: key,
                gain: gain,
              });
            }
            targetDeviceItem = {
              ...targetDeviceItem,
              ecgYAxisData: targetEcgYAxisData,
              respirationWaveform: {
                //呼吸频率
                minY:
                  data[i].productModel && data[i].productModel.includes('bxs')
                    ? -800
                    : -200,
                maxY:
                  data[i].productModel && data[i].productModel.includes('bxs')
                    ? 800
                    : 200,
                canvasInterval: tempCanvasInterval,
                color: '#00fffd',
                padding: 5,
                name: '',
                ecgYAxisData: data[i].respirationWaveform,
                key: data[i].ip + 'respirationWaveform',
                id: data[i].ip + 'respirationWaveform',
                leadNumber: '',
                notEcg: true,
              },
              spo2Waveform: {
                minY: -150,
                maxY: 150,
                canvasInterval:
                  data[i].productModel && data[i].productModel.includes('bxs')
                    ? Number((canvasInterval * 2).toFixed(2))
                    : tempCanvasInterval,
                color: '#31a0ff',
                padding: 5,
                name: '',
                ecgYAxisData: data[i].spo2Waveform,
                key: data[i].ip + 'spo2Waveform',
                id: data[i].ip + 'spo2Waveform',
                leadNumber: '',
                notEcg: true,
              },
              heartRate: data[i].heartRate,
              respirationRate: data[i].respirationRate,
              systolicPressure: data[i].systolicPressure,
              diastolicPressure: data[i].diastolicPressure,
              meanPressure: data[i].meanPressure,
              spo2Value: data[i].spo2Value,
              temperature1: data[i].temperature1,
              temperature2: data[i].temperature2,
              leadMode: data[i].leadMode,
              status: data[i].status,
              alarms: data[i].alarms || [],
            };
            if (maxAlarmLevelTarget < data[i].maxAlarmLevel) {
              maxAlarmLevelTarget = data[i].maxAlarmLevel;
            }
          }
        }
        setAlarmLevel(String(maxAlarmLevelTarget));
        setMonitorData(_.cloneDeep(targetDeviceItem));
        if (!targetDeviceItem?.alarms) {
          setTargetAlarms([]);
        } else {
          const tempArr = targetDeviceItem.alarms.map((alarmsItems: any) => {
            for (const key in ALARM_THRESHOLD_MAP) {
              if (alarmsItems.msg.includes(key)) {
                return {
                  level: alarmsItems.level,
                  msg: alarmsItems.msg.replace(
                    key,
                    ALARM_THRESHOLD_MAP[
                      key as keyof typeof ALARM_THRESHOLD_MAP
                    ],
                  ),
                };
              }
            }
          });
          setTargetAlarms(tempArr); // 存储处理后的警报信息
        }
      }
    }, 80);
  };
  const sendWsData = () => {
    if (wsRef?.current) {
      sendWsDataInterval = setInterval(() => {
        if (!wsRef?.current) {
          sendWsDataInterval && window.clearInterval(sendWsDataInterval);
        } else {
          wsRef?.current?.readyState == 1 &&
            wsRef?.current?.send('I am connect');
        }
      }, 3000);
    } else {
      sendWsDataInterval && window.clearInterval(sendWsDataInterval);
    }
  };
  // 轮询逻辑依赖防抖后的长度
  useEffect(() => {
    // 清除旧定时器
    const debouncedAlarmsLength = targetAlarms.length;
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }

    if (debouncedAlarmsLength > 1) {
      intervalRef.current = setInterval(() => {
        setCurrentIndex((prev) => (prev + 1) % debouncedAlarmsLength);
      }, 1000);
    }

    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
        intervalRef.current = null;
      }
    };
  }, [targetAlarms.length]); // 依赖防抖后的值

  useEffect(() => {
    // 清除旧定时器
    if (alarmLevel == 3 || alarmLevel == 2) {
      if (playAlarmintervalRef.current) {
        clearInterval(playAlarmintervalRef.current);
        playAlarmintervalRef.current = null;
      }
      playAlarmintervalRef.current = setInterval(() => {
        videoRef?.current && videoRef?.current.play();
      }, 10000);
    }

    return () => {
      if (playAlarmintervalRef.current) {
        clearInterval(playAlarmintervalRef.current);
        playAlarmintervalRef.current = null;
      }
    };
  }, [alarmLevel]);

  useEffect(() => {
    if (scketSuccessFlag) {
      setTimeout(() => {
        drawIntervalFun();
        sendWsData();
      }, 2000);
    }
  }, [scketSuccessFlag]);
  useEffect(() => {
    if (screenAreaId || alarmId) {
      getScreenAreaInfoData();
    }
  }, [screenAreaId, alarmId]);
  useEffect(() => {
    return () => {
      if (timer) {
        window.clearInterval(timer);
      }
      if (setIntervalFun) {
        window.clearInterval(setIntervalFun);
      }
      if (checkWebSocketFun) {
        clearInterval(checkWebSocketFun);
      }
      if (sendWsDataInterval) {
        clearInterval(sendWsDataInterval);
      }
    };
  }, []);
  return (
    <div className="persona-home-page-wrapper">
      <div className="header-wrapper">
        <div className="patient-info-wrapper">
          {screenAreaInfoData?.patient?.sex && (
            <>
              {screenAreaInfoData?.patient?.sex == 1 ? (
                <img src={manPng} alt="" />
              ) : (
                <img src={womanPng} alt="" />
              )}
            </>
          )}
          {screenAreaInfoData?.patient?.name || '---'}
          {screenAreaInfoData?.patient?.ward?.name && (
            <> {screenAreaInfoData?.patient?.ward?.name}</>
          )}
          {screenAreaInfoData?.patient?.ward?.bed?.code && (
            <> {screenAreaInfoData?.patient?.ward?.bed?.code}</>
          )}
        </div>
        <div className="time-show">{nowTime}</div>
      </div>
      <div className="content-wrapper">
        {monitorData?.status === 'offline' ? (
          <div className="device-offline">设备离线</div>
        ) : (
          <>
            <div className="left-wrapper">
              <div className="chart-collection-item breathe-chart">
                <div className="chart-inner-wrapper">
                  {monitorData?.respirationWaveform ? (
                    <div
                      className="ecg-charts-item"
                      key={monitorData.respirationWaveform.key}
                    >
                      <EcgCharts itemData={monitorData.respirationWaveform} />
                    </div>
                  ) : (
                    <div className="no-data">暂无数据</div>
                  )}
                </div>
                <div className="ecg-desc-wrapper">
                  <div className="ecg-describe-item">
                    <div className="public-wrapper1">
                      <div className="title-show-wrapper">
                        <div className="title1">呼吸</div>
                        <div className="title2">bpm</div>
                      </div>
                      {respirationRateObj.alarmSwitch === '0' ? (
                        <img
                          src={closeNotice}
                          alt=""
                          className="closeNoticeImg"
                        />
                      ) : (
                        <div className="title4">
                          <div>{respirationRateObj?.upperLimit || '-'}</div>
                          <div>{respirationRateObj?.lowerLimit || '-'}</div>
                        </div>
                      )}
                    </div>
                    <div
                      className={
                        respirationRateObj.alarmSwitch == 1 &&
                        (monitorData.respirationRate >
                          respirationRateObj.upperLimit ||
                          monitorData.respirationRate <
                            respirationRateObj.lowerLimit)
                          ? respirationRateObj.level == 3
                            ? 'title3 notice'
                            : respirationRateObj.level == 2
                            ? 'title3 notice1'
                            : 'title3'
                          : 'title3'
                      }
                    >
                      {monitorData.respirationRate}
                    </div>
                  </div>
                </div>
              </div>
              <div className="chart-collection-item blood-oxygen-chart">
                <div className="chart-inner-wrapper">
                  {monitorData?.spo2Waveform ? (
                    <div
                      className="ecg-charts-item"
                      key={monitorData.spo2Waveform.key}
                    >
                      <EcgCharts itemData={monitorData.spo2Waveform} />
                    </div>
                  ) : (
                    <div className="no-data">暂无数据</div>
                  )}
                </div>
                <div className="ecg-desc-wrapper">
                  <div className="ecg-describe-item">
                    <div className="public-wrapper1">
                      <div className="title-show-wrapper">
                        <div className="title1">SpO2</div>
                        <div className="title2">%</div>
                      </div>
                      {spo2ValueObj.alarmSwitch === '0' ? (
                        <img
                          src={closeNotice}
                          alt=""
                          className="closeNoticeImg"
                        />
                      ) : (
                        <div className="title4">
                          <div>{spo2ValueObj?.upperLimit || '-'}</div>
                          <div>{spo2ValueObj?.lowerLimit || '-'}</div>
                        </div>
                      )}
                    </div>
                    <div
                      className={
                        spo2ValueObj.alarmSwitch == 1 &&
                        (monitorData.spo2Value > spo2ValueObj.upperLimit ||
                          monitorData.spo2Value < spo2ValueObj.lowerLimit)
                          ? spo2ValueObj.level == 3
                            ? 'title3 notice'
                            : spo2ValueObj.level == 2
                            ? 'title3 notice1'
                            : 'title3'
                          : 'title3'
                      }
                    >
                      {monitorData.spo2Value}
                    </div>
                  </div>
                </div>
              </div>
              <div className="chart-collection-item co2-chart">
                <div className="chart-inner-wrapper">
                  <div className="no-data">暂无数据</div>
                </div>
                <div className="ecg-desc-wrapper">
                  <div className="ecg-describe-item">
                    <div className="public-wrapper1">
                      <div className="title-show-wrapper">
                        <div className="title1">CO2</div>
                        <div className="title2"></div>
                      </div>
                      <div className="title4"></div>
                    </div>
                    <div className="title3">-</div>
                  </div>
                </div>
              </div>
              <div className="chart-collection-item expiratory-volume-chart">
                <div className="chart-inner-wrapper">
                  <div className="no-data">暂无数据</div>
                </div>
                <div className="ecg-desc-wrapper">
                  <div className="ecg-describe-item">
                    <div className="public-wrapper1">
                      <div className="title-show-wrapper">
                        <div className="title1">呼出潮气量</div>
                        <div className="title2"></div>
                      </div>
                      <div className="title4"></div>
                    </div>
                    <div className="title3">-</div>
                  </div>
                </div>
              </div>
              <div className="chart-collection-item paw-chart">
                <div className="chart-inner-wrapper">
                  <div className="no-data">暂无数据</div>
                </div>
                <div className="ecg-desc-wrapper">
                  <div className="ecg-describe-item">
                    <div className="public-wrapper1">
                      <div className="title-show-wrapper">
                        <div className="title1">峰值压</div>
                        <div className="title2"></div>
                      </div>
                      <div className="title4"></div>
                    </div>
                    <div className="title3">-</div>
                  </div>
                </div>
              </div>
            </div>
            <div className="right-wrapper">
              <div className="ecg-module-wrapper-person">
                <div className="ecg-list-wrapper">
                  {monitorData?.ecgYAxisData &&
                    monitorData?.ecgYAxisData.length > 0 && (
                      <>
                        {monitorData.ecgYAxisData.map((items: any) => {
                          return (
                            <div
                              className={`ecg-charts-item  item_${monitorData.ecgYAxisData?.length}`}
                              key={items.key}
                            >
                              <EcgCharts
                                itemData={{
                                  ...items,
                                  ecgFlag: true,
                                }}
                              />
                            </div>
                          );
                        })}
                      </>
                    )}
                </div>
                <div className="ecg-desc-wrapper">
                  {/* 心率 */}
                  <div className="ecg-describe-item">
                    <div className="public-wrapper1">
                      <div className="title-show-wrapper">
                        <div className="title1">ECG</div>
                        <div className="title2">bpm</div>
                      </div>
                      {heartRateObj.alarmSwitch === '0' ? (
                        <img
                          src={closeNotice}
                          alt=""
                          className="closeNoticeImg"
                        />
                      ) : (
                        <div className="title4">
                          <div>{heartRateObj?.upperLimit || '-'}</div>
                          <div>{heartRateObj?.lowerLimit || '-'}</div>
                        </div>
                      )}
                    </div>
                    <div
                      className={
                        heartRateObj.alarmSwitch === '1' &&
                        (monitorData.heartRate > heartRateObj.upperLimit ||
                          monitorData.heartRate < heartRateObj.lowerLimit)
                          ? heartRateObj.level == 3
                            ? 'title3 notice'
                            : heartRateObj.level == 2
                            ? 'title3 notice1'
                            : 'title3'
                          : 'title3'
                      }
                    >
                      {monitorData.heartRate}
                    </div>
                  </div>
                  {/* 温度1 */}
                  <div className="ecg-describe-item">
                    <div className="public-wrapper1">
                      <div className="title-show-wrapper">
                        <div className="title1">温度1</div>
                        <div className="title2">T</div>
                      </div>
                      {temperature1Obj.alarmSwitch === '0' ? (
                        <img
                          src={closeNotice}
                          alt=""
                          className="closeNoticeImg"
                        />
                      ) : (
                        <div className="title4">
                          <div>{temperature1Obj?.upperLimit || '-'}</div>
                          <div>{temperature1Obj?.lowerLimit || '-'}</div>
                        </div>
                      )}
                    </div>
                    <div
                      className={
                        temperature1Obj.alarmSwitch === '1' &&
                        (monitorData.temperature1 >
                          temperature1Obj.upperLimit ||
                          monitorData.temperature1 < temperature1Obj.lowerLimit)
                          ? temperature1Obj.level == 3
                            ? 'title3 notice'
                            : temperature1Obj.level == 2
                            ? 'title3 notice1'
                            : 'title3'
                          : 'title3'
                      }
                    >
                      {monitorData.temperature1}
                    </div>
                  </div>
                  {/* 温度2 */}
                  <div className="ecg-describe-item">
                    <div className="public-wrapper1">
                      <div className="title-show-wrapper">
                        <div className="title1">温度2</div>
                        <div className="title2">T</div>
                      </div>
                      {temperature2Obj.alarmSwitch === '0' ? (
                        <img
                          src={closeNotice}
                          alt=""
                          className="closeNoticeImg"
                        />
                      ) : (
                        <div className="title4">
                          <div>{temperature2Obj?.upperLimit || '-'}</div>
                          <div>{temperature2Obj?.lowerLimit || '-'}</div>
                        </div>
                      )}
                    </div>
                    <div
                      className={
                        temperature2Obj.alarmSwitch === '1' &&
                        (monitorData.temperature2 >
                          temperature2Obj.upperLimit ||
                          monitorData.temperature2 < temperature2Obj.lowerLimit)
                          ? temperature2Obj.level == 3
                            ? 'title3 notice'
                            : temperature2Obj.level == 2
                            ? 'title3 notice1'
                            : 'title3'
                          : 'title3'
                      }
                    >
                      {monitorData.temperature2}
                    </div>
                  </div>
                  {/* 血压 */}
                  <div className="ecg-describe-item  bloodPressure">
                    <div className="public-wrapper1">
                      <div className="title1">血压</div>
                    </div>
                    <div className="blood-pressure-list">
                      <div className="blood-pressure-item">
                        <div className="blood-pressure-item-title">收缩压</div>
                        <div
                          className={
                            systolicPressureObj.alarmSwitch === '1' &&
                            (monitorData.systolicPressure >
                              systolicPressureObj.upperLimit ||
                              monitorData.systolicPressure <
                                systolicPressureObj.lowerLimit)
                              ? systolicPressureObj.level == 3
                                ? 'blood-pressure-item-value notice'
                                : systolicPressureObj.level == 2
                                ? 'blood-pressure-item-value notice1'
                                : 'blood-pressure-item-value'
                              : 'blood-pressure-item-value'
                          }
                        >
                          {monitorData?.systolicPressure}
                        </div>
                        {systolicPressureObj.alarmSwitch === '0' ? (
                          <img
                            src={closeNotice}
                            alt=""
                            className="closeNoticeImg"
                          />
                        ) : (
                          <div className="blood-pressure-item-range">
                            <p>{systolicPressureObj?.upperLimit || '-'}</p>
                            <p>{systolicPressureObj?.lowerLimit || '-'}</p>
                          </div>
                        )}
                      </div>
                      <div className="blood-pressure-item">
                        <div className="blood-pressure-item-title">舒张压</div>
                        <div
                          className={
                            diastolicPressureObj.alarmSwitch === '1' &&
                            (monitorData.diastolicPressure >
                              diastolicPressureObj.upperLimit ||
                              monitorData.diastolicPressure <
                                diastolicPressureObj.lowerLimit)
                              ? diastolicPressureObj.level == 3
                                ? 'blood-pressure-item-value notice'
                                : diastolicPressureObj.level == 2
                                ? 'blood-pressure-item-value notice1'
                                : 'blood-pressure-item-value'
                              : 'blood-pressure-item-value'
                          }
                        >
                          {monitorData?.diastolicPressure}
                        </div>
                        {diastolicPressureObj.alarmSwitch === '0' ? (
                          <img
                            src={closeNotice}
                            alt=""
                            className="closeNoticeImg"
                          />
                        ) : (
                          <div className="blood-pressure-item-range">
                            <p>{diastolicPressureObj?.upperLimit || '-'}</p>
                            <p>{diastolicPressureObj?.lowerLimit || '-'}</p>
                          </div>
                        )}
                      </div>
                      <div className="blood-pressure-item">
                        <div className="blood-pressure-item-title">平均压</div>
                        <div
                          className={
                            meanPressureObj.alarmSwitch === '1' &&
                            (monitorData.meanPressure >
                              meanPressureObj.upperLimit ||
                              monitorData.meanPressure <
                                meanPressureObj.lowerLimit)
                              ? meanPressureObj.level == 3
                                ? 'blood-pressure-item-value notice'
                                : meanPressureObj.level == 2
                                ? 'blood-pressure-item-value notice1'
                                : 'blood-pressure-item-value'
                              : 'blood-pressure-item-value'
                          }
                        >
                          {monitorData?.meanPressure}
                        </div>
                        {meanPressureObj.alarmSwitch === '0' ? (
                          <img
                            src={closeNotice}
                            alt=""
                            className="closeNoticeImg"
                          />
                        ) : (
                          <div className="blood-pressure-item-range">
                            <p>{meanPressureObj?.upperLimit || '-'}</p>
                            <p>{meanPressureObj?.lowerLimit || '-'}</p>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                  {/* 走纸速度 */}
                  <div className="ecg-describe-item">
                    <div className="public-wrapper1">
                      <div className="title-show-wrapper">
                        <div className="title1">走纸速度</div>
                      </div>
                      <div className="title4">mm/s</div>
                    </div>
                    <div className="title3">
                      {paperSpeed ? paperSpeed.replace('mm/s', '') : '-'}
                    </div>
                  </div>
                  {/* 增益 */}
                  <div className="ecg-describe-item">
                    <div className="public-wrapper1">
                      <div className="title-show-wrapper">
                        <div className="title1">增益</div>
                      </div>
                      <div className="title4">10mm/mv</div>
                    </div>
                    <div className="title3">{gain || '-'}</div>
                  </div>
                  {/* 导联模式 */}
                  <div className="ecg-describe-item leadMode">
                    <div className="public-wrapper1">
                      <div className="title-show-wrapper">
                        <div className="title1">导联模式</div>
                      </div>
                      <div className="title4"></div>
                    </div>
                    <div className="title3">{monitorData?.leadMode || '-'}</div>
                  </div>
                </div>
              </div>
            </div>
          </>
        )}
      </div>
      {/* 报警 */}
      {targetAlarms?.length > 0 && (
        <Popconfirm
          title="生理报警"
          icon={<></>}
          showCancel={false}
          okType="default"
          okText="关闭"
          onConfirm={() => {}}
          description={() => {
            return (
              <div className="alarm-list-wrapper">
                {targetAlarms.map((items: any, index: number) => {
                  return (
                    <div
                      className={
                        targetAlarms[index]?.level == 2
                          ? 'alarm-item-wrapper medium'
                          : targetAlarms[index]?.level == 3
                          ? 'alarm-item-wrapper high'
                          : 'alarm-item-wrapper'
                      }
                      key={index + '-alarm-item-wrapper'}
                    >
                      <p className="alarm-msg-content">{items.msg}</p>
                    </div>
                  );
                })}
              </div>
            );
          }}
        >
          {targetAlarms[currentIndex] && (
            <div
              className={
                targetAlarms[currentIndex]?.level == 2
                  ? 'alarm-show-wrapper medium'
                  : targetAlarms[currentIndex]?.level == 3
                  ? 'alarm-show-wrapper high'
                  : 'alarm-show-wrapper'
              }
            >
              <p
                className="alarm-msg-content"
                dangerouslySetInnerHTML={{
                  __html: targetAlarms[currentIndex].msg,
                }}
              />
              <EllipsisOutlined className="alarm-msg-icon" />
            </div>
          )}
        </Popconfirm>
      )}
      <video
        ref={videoRef}
        src={alarmLevel == 3 ? highMp3 : alarmLevel == 2 ? middleMp3 : ''}
        width="0"
        height="0"
        playsInline
        preload="metadata"
        autoPlay
        style={{
          display: 'none',
        }}
      />
    </div>
  );
};

export default PersonalHomePage;
